<template>
  <div id="addPositionAndSalaryRule">
    <div class="topinfo">
      <div class="info">
        <span>规则名称:</span>
        <el-input v-model="form.ruleName" placeholder="请输入定岗定薪规则名称"></el-input>
      </div>
      <div class="info">
        <span>适用范围:</span>
        <el-cascader v-model="deparmentIds" :options="rangeOption.options" :props="rangeOption.props" collapse-tags clearable placeholder="请选择适用范围"></el-cascader>
      </div>
      <div class="info">
        <span>备注:</span>
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </div>
    </div>
    <div class="content" :style="{ height: contentHeight + 'px' }">
      <div class="item" v-for="(item, index) in form.rules" :key="index">
        <div class="one">
          <span class="text">岗位:</span>
          <el-select v-model="item.postId">
            <el-option label="产品经理"></el-option>
          </el-select>
          <span class="icon" @click="deletePost(index)"><i class="el-icon-delete"></i></span>
        </div>
        <div class="rules" v-for="(item2, index2) in item.rule" :key="index2">
          <div class="num">{{ index2 + 1 }}</div>
          <span class="delete" @click="deleteRule(index, index2)"><i class="el-icon-delete"></i></span>
          <div class="rule">
            <span>定薪岗位:</span>
            <el-select v-model="item2.postId">
              <el-option label="产品经理"></el-option>
            </el-select>
            <el-select v-model="item2.positionId">
              <el-option label="职位"></el-option>
            </el-select>
            <el-select v-model="item2.rankId">
              <el-option label="职级"></el-option>
            </el-select>
          </div>
          <div class="rule">
            <span>岗位薪资范围</span>
            <el-input placeholder="请输入最低薪资范围" v-model="item2.salaryRange.min"></el-input>
            <span>至</span>
            <el-input placeholder="请输入最高薪资范围" v-model="item2.salaryRange.max"></el-input>
          </div>
          <div class="rule">
            <span>岗位入职薪资：正式薪资</span>
            <el-input v-model="item2.formalSalary"></el-input>
            <span>元;</span>
            <span>试用期薪资</span>
            <el-select v-model="item2.probationSalaryType">
              <el-option label="按固定工资" :value="1"></el-option>
              <el-option label="按正式工资比例" :value="2"></el-option>
            </el-select>
            <el-input v-model="item2.probationSalary" v-if="item2.probationSalaryType == 1"></el-input>
            <el-input v-model="item2.rate" v-if="item2.probationSalaryType == 2"></el-input>
            <span v-if="item2.probationSalaryType == 1">元;</span>
            <span v-if="item2.probationSalaryType == 2">%;</span>
          </div>
        </div>
        <el-button icon="el-icon-plus" type="primary" @click="addGroup(index)">新增定薪分组</el-button>
        <el-divider></el-divider>
      </div>
      <el-button icon="el-icon-plus" type="primary" @click="addPost">新增定薪岗位</el-button>
    </div>
    <div class="footer">
      <el-button type="default">取消</el-button>
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addPositionAndSalaryRule",
  data() {
    return {
      //内容高度
      contentHeight: 0,
      //数据
      form: {
        ruleName: "",
        deparmentIds: [],
        remark: "",
        //规则
        rules: [
          {
            //岗位
            postId: "",
            //规则
            rule: [
              {
                postId: "",
                positionId: "",
                rankId: "",
                salaryRange: {
                  min: null,
                  max: null
                },
                probationSalaryType: 1,
                probationSalary: null,
                rate: null
              }
            ]
          }
        ]
      },
      //适用范围配置
      rangeOption: {
        props: { multiple: true },
        options: [
          {
            value: 1,
            label: "东南",
            children: [
              {
                value: 2,
                label: "上海",
                children: [
                  { value: 3, label: "普陀" },
                  { value: 4, label: "黄埔" },
                  { value: 5, label: "徐汇" }
                ]
              },
              {
                value: 7,
                label: "江苏",
                children: [
                  { value: 8, label: "南京" },
                  { value: 9, label: "苏州" },
                  { value: 10, label: "无锡" }
                ]
              },
              {
                value: 12,
                label: "浙江",
                children: [
                  { value: 13, label: "杭州" },
                  { value: 14, label: "宁波" },
                  { value: 15, label: "嘉兴" }
                ]
              }
            ]
          },
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" }
                ]
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" }
                ]
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.getContentHeight();
    window.addEventListener("resize", this.getContentHeight());
  },
  methods: {
    deletePost(index) {
      if (this.form.rules.length == 1) {
        this.$message.warning("至少保留一个");
        return;
      }
      this.$confirm("确定删除此信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.rules.splice(index, 1);
      });
    },
    deleteRule(index, ind) {
      if (this.form.rules[index].rule.length == 1) {
        this.$message.warning("至少保留一个");
        return;
      }
      this.$confirm("确定删除此信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.rules[index].rule.splice(ind, 1);
      });
    },
    getContentHeight() {
      this.contentHeight = window.innerHeight - 340;
    },
    addGroup(index) {
      this.form.rules[index].rule.push({
        postId: "",
        positionId: "",
        rankId: "",
        salaryRange: {
          min: null,
          max: null
        },
        probationSalaryType: 1,
        probationSalary: null,
        rate: null
      });
    },
    addPost() {
      this.form.rules.push({
        //岗位
        postId: "",
        //规则
        rule: [
          {
            postId: "",
            positionId: "",
            rankId: "",
            salaryRange: {
              min: null,
              max: null
            },
            probationSalaryType: 1,
            probationSalary: null,
            rate: null
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
#addPositionAndSalaryRule {
  display: flex;
  flex-flow: column;
  padding: 50px;
  overflow: hidden;
  .topinfo {
    position: absolute;
    background-color: white;
    display: flex;
    flex-flow: row;
    .info {
      display: flex;
      flex-flow: row;
      line-height: 30px;
      margin-right: 12px;
      text-align: left;
      span {
        font-size: 12px;
        word-wrap: break-word;
        white-space: normal;
        width: 70px;
      }
    }
  }
  .content {
    margin-top: 45px;
    padding: 0 4px 70px 4px;
    height: 200px;
    overflow: auto;
    .el-button {
      margin-left: 0 !important;
    }
    .item {
      .one {
        display: flex;
        flex-flow: row;
        line-height: 40px;
        height: 40px;
        text-align: left;
        .text {
          font-size: 12px;
          word-wrap: break-word;
          white-space: normal;
          width: 40px;
        }
        .el-select {
          width: 160px;
        }
        .icon {
          font-size: 16px;
        }
        .icon :hover {
          cursor: pointer;
          color: skyblue;
        }
      }
      .rules {
        margin-top: 15px;
        margin-bottom: 15px;
        width: 100%;
        height: 160px;
        box-shadow: 0px 0px 5px 5px #f5f6fa;
        .num {
          position: relative;
          left: 15px;
          top: 15px;
          float: left;
          background-color: #409eff;
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 30px;
          color: white;
        }
        .delete {
          position: relative;
          right: 15px;
          top: 15px;
          float: right;
        }
        .delete :hover {
          cursor: pointer;
          color: skyblue;
        }
        .rule {
          margin-left: 90px;
          display: flex;
          flex-flow: row;
          line-height: 50px;
          span {
            font-size: 12px;
          }
          .el-select {
            width: 140px;
            margin-right: 12px;
          }
          .el-input {
            width: 160px;
            margin-right: 12px;
          }
        }
      }
    }
  }
  .footer {
    background-color: white;
    position: absolute;
    bottom: 0px;
    left: 8px;
    width: 99%;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
  }
}
</style>
